<template>
	<view :style="viewColor">
		<!-- <toubu :current="0"/> -->
		<div style="height: 60rpx;"></div>
		<!-- 信息123456 -->
		<div class="haibao">
			<div class="haibao-top">
				<div class="haitetx">
					<p>{{userlist.nickname==null?'':userlist.nickname}}</p>
					<span style="display: block;">
						<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
						<span>{{userlist.phone}}</span>
					</span>
					<span>
						<image :src="imgHost + '/index/ement.png'" mode=""></image>
						<span>{{userlist.email}}</span>
					</span>
				</div>
				<div class="haiimage">
					<view>
						<image :src="userlist.avatar" mode=""></image>
					</view>
				</div>
			</div>
			<div class="haibao-bott">
				<view @click="wdmp">我的名片</view>
				<view @click="fenxiang">
					<image :src="imgHost + '/mine/fenx.png'" mode=""></image>
					分享
				</view>
			</div>
		</div>
		<!-- 我的名片夹 -->
		<div class="mymp">
			<view class='toupen'>
				<span>我的名片夹</span>
				<span>{{carlist.length==undefined?'0':carlist.length}}
					<image :src="imgHost + '/mine/tou.png'" mode=""></image>
				</span>
			</view>
			<view class="mympxx" v-for="(item,index) in carlist" :key="index">
				<div class="mptou" @click="wodemp(item.uid)">
					<span>{{item.enterprise_name==null?'_ _':item.enterprise_name}}</span>
					<!-- <image :src="imgHost + '/mine/sand.png'" mode=""></image> -->
					<p>查看名片</p>
				</div>
				<div class="touxian">
					<view>
						<image :src="item.avatar" mode=""></image>
					</view>
					<view>
						<span>{{item.nickname}}</span>
						<!-- <span>{{item.position_name==null?'_ _':item.position_name}}</span> -->
					</view>
				</div>
				<view class="mympdh">
					<!-- <text></text> -->
					<!-- 备注：{{item.client_remark}}-->
					<span @click="bodadianhu(item.phone)">
						<image :src="imgHost + '/mine/dainh.png'" mode=""></image>
						拨打电话
					</span>
					<text class="cancelSc" @click="cancelSc(item,index)">取消收藏</text>
					<!-- <div></div> -->
					<!-- <span @click="zhuanfa(item)">
                              <image :src="imgHost + '/mine/dnxx.png'" mode=""></image>
                              转发名片
                         </span> -->
				</view>
			</view>
		</div>

		<uni-popup ref="iffenxi" type="center">
			<div class="fenxianger">
				<button class="item" open-type="share" hover-class="none" @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>
			</div>
		</uni-popup>
		<!-- <taber :current="1" /> -->
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getconfig
	} from '@/api/public.js'
	// import taber from '../../component/taber/taber.vue'
	import toubu from '../../component/toubu/toubu.vue'
	import {
		card_survey,
		carlist,
		carduser,
		card_person,
		del_client
	} from '@/api/userminp.js'
	import {
		getUserInfo
	} from "@/api/user.js"
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			// taber,
			toubu
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				share_uid: uni.getStorageSync('UID'),
				userlist: {},
				carlist: {},
				shuid: uni.getStorageSync('UID'),
				share_title: ""
			}
		},
		computed: {
			...mapGetters(['viewColor'])
		},
		onShow() {
			// this.getcarduser()
			this.getlistuser()
			this.getUserInfo()
		},
		async onLoad() {
			await getconfig().then(res => {
				this.share_title = res.data.share_title
			})
		},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (e.from === 'menu') {
				//console.log('右上角菜单转发按钮');
			}
			return { // 自定义分享内容
				title: this.share_title,
				path: `/pages/index/minp?share_uid=` + this.shuid // 路径，可传递参数到指定页面
			}
		},
		methods: {
			// 当前用户信息
			getUserInfo() {
				getUserInfo().then(res => {
					if (res.status == 200) {
						this.share_uid = res.data.uid
						this.getcarduser()
					}
				})

			},
			//取消收藏
			cancelSc(item, index) {
				del_client({
					uid: this.userlist.uid,
					client_uid: item.uid
				}).then(res => {
					uni.showToast({
						title: "取消收藏成功！",
						icon: 'none'
					})
				})
				this.carlist.splice(index, 1)
			},
			zhuanfa(item) {
				this.shuid = item.uid
				this.$refs.iffenxi.open('bottom')
			},
			// 分享
			goFriend(e) {
				if (e.from === 'button') {
					//console.log('来自页面内转发按钮');
				} else if (e.from === 'menu') {
					//console.log('右上角菜单转发按钮');
				}
				return { // 自定义分享内容
					title: this.share_title,
					path: `/pages/index/minp?share_uid=` + this.shuid
				}
				this.$refs.iffenxi.close()
			},
			fenxiang() {
				// #ifdef MP
				this.$refs.iffenxi.open('bottom')
				// #endif
			},

			bodadianhu(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 我的个人名片信息
			getcarduser() {
				carduser({
					share_uid: this.share_uid
				}).then((res) => {
					this.userlist = res.data
				})
			},
			getlistuser() {
				carlist().then((res) => {
					this.carlist = res.data
				})
			},
			wodemp(uid) {
				// uni.navigateTo({
				//      url: '/pages/userminp/mine/minpmb/minpmb?uid='+uid
				// })
				uni.reLaunch({
					url: '/pages/index/minp?share_uid=' + uid,
					fail() {
						uni.redirectTo({
							url: '/pages/index/minp?share_uid=' + uid
						})
					}
				})
			},
			wdmp() {
				uni.navigateTo({
					url: '/pages/userminp/bianjimp/bianjimp'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fenxianger {
		background-color: #fff;
		height: 150rpx;

		.item {
			padding: 20rpx;

			.iconfont {
				font-size: 70rpx;
				color: green;
			}

			view {
				font-size: 30rpx;
			}
		}
	}

	page {
		background-color: #fefefe;
	}

	.haibao {
		height: 346rpx;
		border-radius: 8rpx;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 48rpx;
		background-color: rgba(255, 255, 255, 0.97);

		.haibao-top {
			height: 210rpx;
			padding: 48rpx;
			padding-bottom: 0rpx;
			display: flex;
			justify-content: space-between;

			.haiimage {
				view {
					margin-top: 20rpx;
					width: 144rpx;
					height: 144rpx;
					overflow: hidden;
					border-radius: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.haitetx {
				margin-top: 20rpx;

				span {

					margin-top: 10rpx;

					image {
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: left;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				p {
					font-weight: 600;
					font-size: 40rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;
				}
			}
		}

		.haibao-bott {
			padding-top: 48rpx;
			padding-left: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view:nth-child(1) {
				width: 160rpx;
				height: 54rpx;
				border-radius: 27rpx;
				background: transparent;
				border: 2rpx solid #595959;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 54rpx;
				text-align: center;
				color: #595959;
			}

			view:nth-child(2) {
				width: 154rpx;
				height: 54rpx;
				border-radius: 27rpx 0 0 27rpx;
				background: var(--view-theme);
				font-weight: 400;
				font-size: 24rpx;
				line-height: 54rpx;
				text-align: center;
				color: #fff;

				image {
					margin-right: 15rpx;
					vertical-align: middle;
					width: 26rpx;
					height: 30rpx;
				}
			}
		}
	}

	.mymp {
		margin-top: 32rpx;
		padding-bottom: 150rpx;

		.toupen {
			margin: 32rpx 48rpx;
			border-left: 4rpx solid var(--view-theme);
			display: flex;
			justify-content: space-between;
			align-items: center;

			span:nth-child(1) {
				margin-left: 12rpx;
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			span:nth-child(2) {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: var(--view-theme);

				image {
					width: 27.18rpx;
					height: 27.12rpx;
					vertical-align: middle;
					margin-left: 10rpx;
				}
			}
		}

		.mympxx {
			box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
			background-color: #fff;
			margin: 0rpx 48rpx;
			padding: 0rpx 32rpx;
			padding-top: 32rpx;
			border-bottom: 2rpx solid #f5f5f5;
			margin-top: 20rpx;

			.mptou {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-left: 4rpx solid var(--view-theme);

				span {

					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: left;
					color: var(--view-theme);
				}

				image {
					width: 36.18rpx;
					height: 8.22rpx;
				}
			}

			.touxian {
				padding: 30rpx 0rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #eee;

				view:nth-child(1) {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				view:nth-child(2) {
					margin-left: 24rpx;

					span:nth-child(1) {
						display: block;
						font-weight: 600;
						font-size: 32rpx;
						line-height: 40rpx;
						text-align: left;
						color: #161616;
					}

					span:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: left;
						color: #a0a0a0;
					}
				}
			}

			.mympdh {
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				div {
					width: 2rpx;
					height: 32rpx;
					background: #eee;
				}

				span {
					text-align: center;
					// width: 228rpx;
					// display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #a0a0a0;

					image {
						margin-right: 10rpx;
						vertical-align: middle;
						width: 28.92rpx;
						height: 28.92rpx;
					}
				}

				.cancelSc {
					font-size: 26rpx;
					color: #bebebe;
				}
			}
		}

	}
</style>